<template>
    <teleport to="#back">
        <div class="loader" :style="{ background: background }">
            <div>
                <div class="icon-loading"></div>
                <label class="text-loading">{{ text }}</label>
            </div>
        </div>
    </teleport>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue';
export default defineComponent({
    props: {
        text: {
            type: String,
            default: '加载中...',
        },
        background: {
            type: String,
        },
    },
    setup() {
        const node = document.createElement('div');
        node.id = 'back';
        document.body.appendChild(node);
        onUnmounted(() => {
            document.body.removeChild(node);
        });
    },
});
</script>
<!-- 
可以看出组件接收两个参数：
（1）text: 提升文案。默认为“加载中...”
（2）background：背景颜色。

-->
<style lang="less" scoped>
.loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    .text-loading {
        color: #fff;
    }
    .icon-loading {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        margin-bottom: 12px;
        border: 6px solid #518cff;
        border-bottom-color: #f1f1f1;
        animation: loading 0.8s linear infinite;
    }
    @keyframes loading {
        to {
            transform: rotate(0deg);
        }
        from {
            transform: rotate(-360deg);
        }
    }
}
.loader > div {
    width: 130px;
    height: 130px;
    border-radius: 15px;
    background-color: rgba(35, 24, 244, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>
